<template>
  <div>
    <div class="m-navigation">
      <div class="left-arrow">
        <i
          class="iconfont icon-arrow-left-s-line"
          v-if="mergeConfig.isShowLeftArrow"
          @click="mergeConfig.handleLeftArrow"
        ></i>
      </div>
      <div class="center-text">{{mergeConfig.text}}</div>
      <div class="right-text">
        <span
          @click="mergeConfig.handleRightText"
          v-if="mergeConfig.rightText"
        >{{mergeConfig.rightText}}</span>
      </div>
    </div>
    <slot name="default">内容</slot>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { INavigation } from "@/types";

@Component({
  name: "Layout"
})
export default class extends Vue {
  @Prop(Object) config!: INavigation;

  // 默认值
  defaultConfig: INavigation = {
    isShowLeftArrow: true,
    text: "",
    handleLeftArrow: this.back
  };

  // 后退
  back() {
    this.$router.go(-1);
  }

  // 合并默认值
  get mergeConfig() {
    return { ...this.defaultConfig, ...this.config };
  }
}
</script>

<style lang="scss">
@import "../assets/styles/layout.scss";
</style>

